<script setup>
const props = defineProps({
  licenseUrl: String,
  isOsiLicense: Boolean,
  package: String,
  repo: String,
  showName: Boolean,
})
</script>

<template>
  <div flex flex-col gap-2>
    <code v-if="props.showName" w-fit text-sm>
      {{props.package}}
    </code>
    <div flex flex-wrap mb-1 gap-1.5 items-center>
      <a :href="`https://npm.im/${props.package}`" class="link">
        <svg size-4 viewBox="0 0 16 16"><path fill="#c12127" d="M0,16V0H16V16ZM3,3V13H8V5h3v8h2V3Z"/><path fill="#fff" d="M3,3H13V13H11V5H8v8H3Z"/></svg>
        <span>npm</span>
      </a>

      <a :href="`https://github.com/${props.repo}`" class="link">
        <svg size-4 viewBox="0 0 98 96"><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" /></svg>
        <span>GitHub</span>
      </a>

      <a :href="`https://socket.dev/npm/package/${props.package}`" class="link">
        <svg h-4 w-3 viewBox="0 0 52 68"><path fill="#553c9a" d="M0 31.6519C0 48.4253 10.7045 62.696 25.6804 68C33.1488 65.3624 39.5828 60.4633 44.1335 54.1445C48.713 47.8071 51.3989 40.0479 51.3989 31.6519V9.27582L25.6897 0L0.00927239 9.27582V31.6519H0ZM21.2266 14.3964H33.1488L29.4965 26.8312H35.9893L18.2409 53.5943L22.4536 34.1638H15.4004L21.2266 14.3964Z" /></svg>
        <span>Socket</span>
      </a>

      <a v-if="props.isOsiLicense" :href="props.licenseUrl" class="link">
        <svg size-4 viewBox="0 0 172 166"><path d="M95.6285 112.928C107.528 108.528 113.728 100.028 113.728 85.4284C113.728 70.8284 101.428 57.9284 86.0285 57.9284C69.8285 57.9284 57.5285 70.8284 57.7285 85.4284C57.9285 100.128 64.9285 109.828 76.1285 113.428L56.3285 162.228C29.8285 155.328 2.82849 124.028 2.82849 85.5284C2.82849 39.8284 39.5285 2.82837 85.5285 2.82837C131.528 2.82837 168.828 39.8284 168.828 85.5284C168.828 124.728 142.128 155.528 114.928 162.428L95.6285 112.928Z" fill="#3DA638" stroke="#1C511C" stroke-width="5.6569" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <span>OSI Compliant License</span>
      </a>
      <a v-else :href="props.licenseUrl" class="link">
        <svg size-4 viewBox="0 0 16 16"><path fill-amber-800 d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736q.058.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53l.529.531l-.001.002l-.002.002l-.006.006l-.006.005l-.01.01l-.045.04q-.317.265-.686.45C14.556 10.78 13.88 11 13 11a4.5 4.5 0 0 1-2.023-.454a3.5 3.5 0 0 1-.686-.45l-.045-.04l-.016-.015l-.006-.006l-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.25.25 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.25.25 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53l.529.531l-.001.002l-.002.002l-.006.006l-.016.015l-.045.04q-.317.265-.686.45C4.556 10.78 3.88 11 3 11a4.5 4.5 0 0 1-2.023-.454a3.5 3.5 0 0 1-.686-.45l-.045-.04l-.016-.015l-.006-.006l-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.25.25 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0m2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"/></svg>
        <span>Non-OSI Compliant License</span>
      </a>
    </div>
  </div>
</template>


<style scoped>
.link {
  align-items: center;
  background: var(--vp-sidebar-bg-color);
  border-radius: 0.375rem;
  border: 1px solid var(--vp-c-divider);
  color: currentColor !important;
  display: flex;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.375rem;
  padding: 0.15rem 0.5rem;
  text-decoration: none !important;
  white-space: nowrap;
}
a.link:hover {
  border-color: var(--vp-c-brand-1);
}
</style>
